<script>
import * as echarts from "echarts";
import { COLORLIST } from '@/utils/variate'
export default {
  // 生成随机 uuid 防止，dom 的 ID 统一
  // const uuid = () => {
  //   var d = new Date().getTime()
  //   if (window.performance && typeof window.performance.now === "function") {
  //     d += performance.now() //use high-precision timer if available
  //   }
  //   var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
  //     var r = (d + Math.random() * 16) % 16 | 0 // d是随机种子
  //     d = Math.floor(d / 16)
  //     return (c == "x" ? r : (r & 0x3) | 0x8).toString(16)
  //   })
  //   return uuid
  // }
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          key: [[0, 100], [1, 200], [2, 300], [3, 400], [4, 500], [5, 600], [6, 700]],
        };
      },
    },
    id: {
      type: String,
      default: () => {
        var d = new Date().getTime();
        if (
          window.performance &&
          typeof window.performance.now === "function"
        ) {
          d += performance.now(); //use high-precision timer if available
        }
        var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
          /[xy]/g,
          function(c) {
            var r = (d + Math.random() * 16) % 16 | 0; // d是随机种子
            d = Math.floor(d / 16);
            return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
          }
        );
        return uuid;
      },
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    initValue() {
      this.$nextTick(() => {
        // 判断元素是否在可视区
        if (Object.keys(this.value).length <= 0) return;

        const chartDom = document.getElementById(this.id);
        this.myChart = echarts.init(chartDom);

        let option = {
          color: COLORLIST,
          animation: false,
          title: {
            text: this.title,
            left: "center",
          },
          grid: {
            left: "13%",
            bottom: '12%',
            top: '10%',
          },
          xAxis: {
            id: "x0",
            type: "value",
            // boundaryGap: '1',
            // inverse: true,
            minorTick: {
              show: true,
            },
            axisLine: {
              onZero: false,
            },
            axisTick: {
              show: true,
              inside: true,
            },
            axisLabel: {
              // formatter: "{value}",
              fontWeight: 700,
              color: "#4c4c4c",
              fontSize: 16 ,
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: {
            id: "y0",
            type: "value",
            splitNumber: 4,
            minorTick: {
              show: true,
            },
            axisTick: {
              show: true,
              inside: true,
            },
            axisLine: {
              onZero: false,
              show: true,
              lineStyle: {
                color: "black",
              },
            },
            axisLabel: {
              formatter: "{value}",
              fontWeight: 700,
              color: "#4c4c4c",
              fontSize: 16,
            },
            splitLine: {
              show: false,
            },
          },
          dataZoom: {
            type: "inside",
            zoomOnMouseWheel: "ctrl",
          },
          series: Object.entries(this.value).map((item) => {
            return {
              name: item[0],
              type: "line",
              data: item[1],
              symbol: "none",
              itemStyle: {
                color: item[0].indexOf("拟合") > -1 && "#000",
                width: 5,
              },
              lineStyle: {
                width: item[0].indexOf("拟合") > -1 ? 1.6 : 2.6,
              },
            };
          }),
        };
        
        window.removeEventListener("resize", this.resizeMyChart);
        window.addEventListener("resize", this.resizeMyChart);
        option && this.myChart.setOption(option, true);
      });
    },
    resizeMyChart() {
      this.myChart.resize();
    },
  },
  beforeMount() {
    this.myChart && this.myChart.dispose();
  },
  watch: {
    value: {
      handler() {
        this.initValue();
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<template>
  <div :id="id" style="width: 100%; aspect-ratio: 16/9;"></div>
</template>
<style lang="scss" scoped></style>
